<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的学生</title>
		<!--引入layui的css  -->
		<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
		<script src="../lib/layui-v2.6.3/layui.js"></script>
		<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
		<script src="../js/global.js"></script>
	</head>
	<style type="text/css">
		@media screen and (min-width: 320px) and (max-width: 1156px){
			.talk_con_mob{
				width:600px;
				height:500px;
				border:1px solid #666;
				margin:50px auto 0;
				background:#f9f9f9;
			}
			.talk_show_mob{
				width:580px;
				height:420px;
				border:1px solid #666;
				background:#fff;
				margin:10px auto 0;
				overflow:auto;
			}
			.talk_input_mob{
				width:580px;
				margin:10px auto 0;
			}
			.talk_word_mob{
				width:420px;
				height:26px;
				padding:0px;
				float:left;
				margin-left:10px;
				outline:none;
				text-indent:10px;
			}
		}
		.talk_con{
			width:600px;
			height:500px;
			border:1px solid #666;
			margin:50px auto 0;
			background:#f9f9f9;
		}
		.talk_show{
			width:580px;
			height:420px;
			border:1px solid #666;
			background:#fff;
			margin:10px auto 0;
			overflow:auto;
		}
		.talk_input{
			width:580px;
			margin:10px auto 0;
		}
		.whotalk{
			width:80px;
			height:30px;
			float:left;
			outline:none;
		}
		.talk_word{
			width:382px;
			height:26px;
			padding:0px;
			float:left;
			margin-left:10px;
			outline:none;
			text-indent:10px;
		}
		.talk_sub{
			width:80px;
			height:30px;
			/*float:right;*/
			margin-right:10px;
		}
		.atalk{
			margin:10px;
		}
		.atalk span{
			display:inline-block;
			background:#0181cc;
			border-radius:10px;
			color:#fff;
			padding:5px 10px;
		}
		.btalk{
			margin:10px;
			text-align:right;
		}
		.btalk span{
			display:inline-block;
			background:#ef8201;
			border-radius:10px;
			color:#fff;
			padding:5px 10px;
		}
	</style>
	<body>
	<!-- 查询条件输入框 -->
	<div class="layui-form-item" style="margin-top: 10px;">
		<form class="layui-form"  onsubmit="return false;" id="queryForm">
			<label class="layui-form-mid">姓名:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="name" name="name" autocomplete="off" class="layui-input">
			</div>
			
			<label class="layui-form-mid">创建时间:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="beginTime" name="beginTime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-mid">--</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="endTime" name="endTime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
			</div>
			
			<label class="layui-form-mid">状态:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select name="stuStatus">
					<option value="">请选择</option>
					<option value="1">已录入</option>
					<option value="2">已分配咨询师</option>
					<option value="3">正在跟踪</option>
					<option value="4">跟踪结束</option>
					<option value="5">跟踪结束</option>
				</select>
			</div>
			
			<div class="layui-input-inline" style="width: 300px;">
				<button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
				<button class="layui-btn layui-btn-normal" type="reset" ><i class="layui-icon">&#xe666;</i>重置</button>
			</div>
		</form>
	</div>
	

	<!-- 修改的弹层页面  -->
	<div id="editLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="editForm" id="editForm"
			action="">
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>姓名:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="name" class="layui-input"
						   autocomplete="off" lay-verify="required">
					<input type="hidden" name="id">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>性别:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="radio" name="sex" value="男" title="男"checked>
					<input type="radio" name="sex" value="女" title="女">
				</div>
			</div>
			<input type="hidden" name="netpusherId" id="netpusherId"><!--添加人的id-->
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>年龄:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="age" class="layui-input"
						   autocomplete="off" lay-verify="required|operationCount">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>手机号:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="phone" class="layui-input"
						   autocomplete="off" lay-verify="required|phone">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">QQ:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="QQ" class="layui-input"
						   autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">微信:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="weixin" class="layui-input"
						   autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">付款时间:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="payTime" class="layui-input" id="payTime"
						   autocomplete="off">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">是否付款:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<select  name="isPay">
						<option value="">请选择</option>
						<option value="1">未付款</option>
						<option value="0">已付款</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">付款金额:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="money" class="layui-input"
						   autocomplete="off" >
				</div>
			</div>
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" lay-filter="editSubmit" lay-submit="">修改提交</button>
			</div>
		</form>
	</div>


	<!-- 新增的弹层页面  -->
	<div id="addLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="addForm" id="addForm"
			action="">
			<div class="layui-form-item">
				<label class="layui-form-label">ID:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="studentId" class="layui-input"id="studentId"
						   readonly="readonly"   autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">学生姓名:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text"  class="layui-input"  name="studentName" id="studentName"
						   readonly="readonly"   autocomplete="off">
					<input type="hidden" name="userId" id="userId">
					<input type="hidden" name="userName" id="userName">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>跟踪时间:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="followTime" class="layui-input" id="followTime"
						   autocomplete="off" lay-verify="required|datetime">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>下次跟踪时间:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="nextFollowTime" class="layui-input" id="nextFollowTime"
						   lay-verify="required|datetime"   autocomplete="off">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">内容:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="content" class="layui-input"
						   autocomplete="off">
				</div>

			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>跟踪类型:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<select name="followType" lay-verify="required">
						<option value="">请选择</option>
						<option value="1">电话跟踪</option>
						<option value="2">QQ跟踪</option>
						<option value="3">微信跟踪</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>跟踪状态:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<select  name="followState"lay-verify="required">
						<option value="">请选择</option>
						<option value="1">已付款</option>
						<option value="2">正在跟踪</option>
						<option value="3">失败</option>
					</select>
				</div>
			</div>
			<div class="layui-btn-container" style="text-align:center;">
				<button class="layui-btn" lay-filter="addSubmit" lay-submit="">提交</button>
			</div>
		</form>
	</div>
	<!-- 聊天  -->
	<div id="messageLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="messageForm" id="messageForm"
			  action="">
			<div style="text-align: center;">
				<span>
				<span>
				<span><input id="toUserId" name="toUserId" type="hidden"></span>
				</span>
					<span>【我的姓名】：
				<span><input id="ziXunName" name="ziXunName" type="text" readonly="readonly"></span>
				</span>
					【接收人姓名】：
				<span><input id="createUser" name="createUser" type="text"readonly="readonly"></span>

				</span>
			</div>
			<div class="talk_con" id="talk_con_id">
				<div class="talk_show" id="liaotianshi">
					<!--- div class="btalk"><span id="bsay">用户说：还没呢，你呢？</span></div --->
				</div>
				<div class="talk_input">
					<input id="contentText" class="talk_word" name="contentText" type="text">
					<input type="button" value="发送" class="talk_sub" onclick="sendMessage()">
					<input type="button" value="关闭聊天" class="talk_sub" onclick="closeSocket()">
				</div>
			</div>
		</form>
	</div>



		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
		
		<!--表格数据里的编辑、查看等操作按钮  -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs layui-btn-primary ops" ops="mystudents:edit"  lay-event="edit"><i class="layui-icon">&#xe642;</i>修改</a>
			<a class="layui-btn layui-btn-xs layui-btn-normal ops" ops="mystudents:add" lay-event="detail"><i class="layui-icon">&#xe658;</i>添加跟踪信息</a>
			<a class="layui-btn layui-btn-xs layui-btn-normal ops" ops="mystudents:message" lay-event="message" onclick="openSocket()"><i class="layui-icon">&#xe658;</i>在线聊天</a>
	</script>
		
		<!--表格工具栏的新增、批量等按钮  -->
		<script type="text/html" id="toolbarDemo">
  		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-sm layui-btn-normal ops" ops="students:export"  lay-event="export"><i class="layui-icon">&#xe654;</i>导出</button>
  		</div>
		</script>

		<script>
		
			//全局变量
			var cur_roleId; //正在编辑的角色id			
			var treeSelectedArr = []; //声明数组，用于保存选中的tree节点的Id
		
			layui.use(['laydate','layer','form','table','tree','upload','transfer'], function() {
				var laydate = layui.laydate	//日期组件
					,layer = layui.layer	//弹层组件
					,form = layui.form		//表单组件
					,upload = layui.upload  //上传组件
					,tree = layui.tree		//树形结构组件
					,$= layui.jquery    	//jQuery
					,table = layui.table	//表格组件
					,transfer = layui.transfer; //穿梭框组件
					//日期控件
					laydate.render({
						elem: '#beginTime'
					});
					laydate.render({
						elem: '#endTime'
					});
					laydate.render({
						elem: '#followTime',
						type:'datetime'
					});
					laydate.render({
						elem: '#nextFollowTime',
						type:'datetime'
					});
				laydate.render({
					elem: '#payTime',
					type:'datetime'
				});
					
				//渲染表格，填充数据
			 	table.render({
					elem: '#proTable',			//对应上面定义的表格ID
					// url: globalData.server+'students/selectAllStudents?netpusherId='+globalData.userId,					//提交到后台的地址
					url: globalData.server+'students/selectAllMyStudent?userId='+globalData.userId,
					headers:{token:globalData.token},
					method: 'get',				//提交方式 get或者post
					even: true, 				//表格隔行变色
					page: true,					//开启分页
					toolbar: '#toolbarDemo', 	//开启头部工具栏，并为其绑定左侧模板
					title: '学生表', 				//表格名称
					cols: [
						[{
							field: 'ck',
							fixed: 'left',
							type: 'checkbox',
							width: 100
						},{
							field: 'id',	//对应实体类里的属性    （必需有）
							fixed: 'left',	//固定方式，left左固定，right右固定 （可选）
							align:'center', //排列方式：left左对齐，center居中，right右对齐（可选）
							width: 80,		//单元格宽度（可选）	
							title: '编号',	//表头名称			（必需有）
							sort: true		//开启排序（可选）
						}, {
							field: 'name',	//对应实体类里的属性
							width: 80,		//单元格宽度
							title: '姓名'		//表头名称
						},{
							field: 'age',	//对应实体类里的属性
							width: 80,		//单元格宽度
							title: '年龄'		//表头名称
						},{
							field: 'sex',	//对应实体类里的属性
							width: 80,		//单元格宽度
							title: '性别'		//表头名称
						}, {
							field: 'phone',
							width: 120,
							title: '电话',
						}, {
							field: 'qq',
							width: 120,
							title: 'QQ'
						},{
							field: 'weixin',
							title: '微信',
							width: 120,
						},{
							field: 'stuStatus',
							title: '状态',
							width: 150,
							// fixed: 'right',
							templet: function (d) {
								if (d.stuStatus == 1) {
									return '<div style="color:#5FB878;" >已录入未分配</div>';
								}else if(d.stuStatus == 2){
									return '<div style="color:#FF5722;" >已分配咨询师</div>';
								}else if(d.stuStatus == 3){
									return '<div style="color:#FFB800;" >正在跟踪</div>';
								}else if(d.stuStatus == 4){
									return '<div style="color:#FFB800;" >跟踪结束（已缴费）</div>';
								}else{
									return '<div style="color:#FFB800;" >跟踪结束（失败）</div>';
								}
							}
						},{
							field: 'createUser',
							title: '网络咨询员',
							width: 130,
					  	},{
							field: 'ziXunName',
							title: '咨询师',
							width: 130,
						},{
							field: 'createTime',
							title: '创建时间',
							width: 170,
						},{
							field: 'firstVisitTime',
							title: '第一次跟踪时间',
							width: 170,
						},{
							field: 'isPay',
							title: '是否付款',
							width: 170,
							templet: function (d) {
								if (d.isPay == 1) {
									return '<div style="color:#5FB878;" >未付款</div>';
								}else{
									return '<div style="color:#FFB800;" >已付款</div>';
								}
							}
						},{
							field: 'payTime',
							title: '付款时间',
							width: 170,
						},{
							field: 'money',
							title: '付款金额',
							width: 130,
						},{
							fixed: 'right',
							width: 300,
							title: '操作',
							toolbar: '#barDemo'
						}]
					],
					done: function(res, curr, count){
						var myOps = sessionStorage.getItem("btnPermission");
						$(".ops").each(function(){
							if(myOps.indexOf($(this).attr('ops'))==-1){
								$(this).hide();
							}
						});
					}
				});
					
				/*
					条件查询	submit 对应 lay-submit  search 对应 lay-filter
				*/
			    form.on('submit(search)', function (data) {
	                var field = data.field;		//获取所有的输入条件值
	                //执行重载
	                table.reload('proTable', {
	                    page: { curr: 1 }, 		// 重载后回到第一页
	                    where: field			// 把所有的输入值传给后台
	                });
	            }); 
				
				//表格头部工具栏事件
				table.on('toolbar(filterTable)', function(obj){
				    switch(obj.event){
				    	//新增按钮
				      case 'add':
				    		//清空新增页面的表单内容，防止上次输入的数据还在
							$("#addForm")[0].reset();
						  // var str = globalData.userId;
						  // $("#askerId").val(str);
						  // document.getElementById("netpusherId").value=globalData.userId;
						 	//打开新增的弹层
							layer.open({
								type:1, 
								title: '您正在新增学生信息',
								content: $('#addLayer'),
								area: ['50%','80%']
							});
				      break;

						case 'export'://导出excel
							//获取选中的数据
							var checkStatus = table.checkStatus('proTable');
							var ids = [];
							for(var i=0; i<checkStatus.data.length; i++){
								ids.push(checkStatus.data[i].id)
							}
							//拼接id(把数组转成字符串，并且用逗号拼接),比如ids=[2,5,6]，那么id='2,5,6'
							var idStr = ids.join(',');
							window.location.href = globalData.server+"students/exportMyStudent?"+$("#queryForm").serialize()+"&token="+globalData.token+"&userId="+globalData.userId+"&idStr="+idStr;
							break;
				    };
				  });

			  	//数据表格里的事件监听
				table.on('tool(filterTable)',function(obj){
					var data = obj.data;//获取当前行的数据
					
					switch(obj.event){
				      case 'edit':		//修改操作
				    	  
				    		//数据的回显
							form.val("editForm", data);
							//打开弹层
							layer.open({
								type:1, 
								title: '您正在修改编号【'+ data.id + '】的信息',
								content: $('#editLayer'),
								area: ['50%','80%']
							});
				    	  
				      break;
						case 'message':		//聊天
							//打开弹层
							form.val("messageForm", data);
							$("#messageuserId").val(data.askerId);
							$("#toUserId").val(data.netpusherId);
							$("#createUser").val(data.createUser);
							$("#ziXunName").val(data.ziXunName);
							layer.open({
								type:1,
								title: '您正在跟【'+ data.createUser + '】聊天',
								content: $('#messageLayer'),
								area: ['90%','90%']
								,cancel: function(){
									//右上角关闭回调
									return false ;//开启该代码可禁止点击该按钮关闭
								}
							});

							break;
				      case 'detail':		//查看操作
						  //清空新增页面的表单内容，防止上次输入的数据还在
						  $("#addForm")[0].reset();
						  form.val("addForm", data);
						  // var studentId = data.id;
						  // $("#studentId").val(studentId);
						  // var studentName = data.name;
						  // $("#studentName").val(studentName);
						  // document.getElementById("studentId").value=data.id;
						  // document.getElementById("studentName").value=data.name;
						  $("#studentId").val(data.id);
						  $("#studentName").val(data.name);
						  document.getElementById("userId").value=globalData.userId;
						  document.getElementById("userName").value=globalData.loginName;
						  //打开新增的弹层
						  layer.open({
							  type:1,
							  title: '您正在添加跟踪信息',
							  content: $('#addLayer'),
							  area: ['50%','80%']
						  });
			      	  break;
			    	};
				})
				//修改弹层的提交按钮
				form.on('submit(editSubmit)', function(data) {
					$.ajax({
						type: 'post', 					//提交方式get或post
						url: globalData.server+'students/updateStudent', 						//提交路径
						headers:{token:globalData.token},
						data: $("#editForm").serialize(), 	//参数
						dataType: 'json', 					//返回的数据类型
						success: function(res) { 		//提交成功
							layer.closeAll();			//关闭弹层
							layer.alert(res.msg);		//提示信息
							table.reload('proTable'); 	//刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					}); 
					return false;
				});
			  	
				//新增弹层的提交按钮
				form.on('submit(addSubmit)', function(data) {

					$.ajax({
						type: 'post', 					//提交方式get或post
						url: globalData.server+'netfollows/createNetfollows',	 					//提交路径
						data: $("#addForm").serialize(),
						headers:{token:globalData.token},
						dataType: 'json', 				//返回的数据类型
						success: function(res) { 		//提交成功
							layer.closeAll();			//关闭弹层
							layer.alert(res.msg);		//提示信息
							table.reload('proTable'); 	// 修改后要刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});

					return false;
				});
				form.verify({
					operationCount: [
						/^[+]{0,1}(\d+)$/,
						'必须为整数！！！'
					]
				});
			});
		</script>
	<script>
		var myDate = new Date;
		var year = myDate.getFullYear(); //获取当前年
		var mon = myDate.getMonth() + 1; //获取当前月
		var date = myDate.getDate(); //获取当前日
		var h = myDate.getHours();//获取当前小时数(0-23)
		var m = myDate.getMinutes();//获取当前分钟数(0-59)
		var s = myDate.getSeconds();//获取当前秒
		var now = year+"-"+mon+"-"+date+" "+h+":"+m+":"+s;
		var socket;
		function openSocket() {
			if (typeof (WebSocket) == "undefined") {
				console.log("您的浏览器不支持WebSocket");
			} else {
				console.log("您的浏览器支持WebSocket");
				//实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
				// var userId = document.getElementById('messageuserId').value;

				var socketUrl = "ws://123.56.230.11:8088/webSocket/" + globalData.userId+"/"+globalData.loginName;
				socket = new WebSocket(socketUrl);
				//打开事件
				socket.onopen = function () {
					console.log("websocket已打开");
					//socket.send("这是来自客户端的消息" + location.href + new Date());
				};
				//获得消息事件
				socket.onmessage = function (msg) {
					var serverMsg = "收到服务端信息：" + msg.data;
					console.log(serverMsg);
					//发现消息进入    开始处理前端触发逻辑
					//把我收到的消息放入聊天室
					$("#liaotianshi").append("<div style='text-align:left'>"+now+"<br>"+msg.data+"</div>")
				};
				//关闭事件
				socket.onclose = function () {
					console.log("websocket已关闭");
				};
				//发生了错误事件
				socket.onerror = function () {
					console.log("websocket发生了错误");
				}
			}
		}

		//7. 主动发消息
		function sendMessage() {
			if (typeof (WebSocket) == "undefined") {
				console.log("您的浏览器不支持WebSocket");
			} else {
				// console.log("您的浏览器支持WebSocket");
				var toUserId = document.getElementById('toUserId').value;
				var contentText = document.getElementById('contentText').value;
				var msgs = '{"toUserId":"' + toUserId + '","contentText":"' + contentText + '"}';
				console.log(msgs);
				socket.send(msgs);
				//把我发的消息放入聊天室
				$("#liaotianshi").append("<div style='text-align:right'>"+now+"<br>"+contentText+"</div>")
				$("#contentText").val("");
			}
		}
		function closeSocket() {
			socket.close();
			//关闭弹层
			layer.closeAll();			//关闭弹层
		}
	</script>
	</body>
</html>
